Framework7 অ্যাপ্লিকেশনে ব্যবহারকারীকে বিভিন্ন ধরনের বার্তা, সতর্কতা অথবা কনফার্মেশন প্রদর্শন করতে Dialog Boxes কার্যকরভাবে ব্যবহার করা যায়। এর মধ্যে সবচেয়ে প্রচলিত হলো Alert ও Confirm ডায়ালগ।
Alert Dialog
Alert (অ্যালার্ট) হলো একটি সাধারণ নোটিফিকেশন ডায়ালগ, যা ব্যবহারকারীকে কোনো বার্তা দেখায় এবং সাধারণত একটিমাত্র অ্যাকশন বোতাম থাকে।
উদাহরণ:
app.dialog.alert('This is an Alert Dialog!', 'Alert Title');
উপরের কোডে app.dialog.alert() ফাংশনটি ব্যবহার করে একটি অ্যালার্ট ডায়ালগ তৈরি করা হয়েছে। প্রথম আর্গুমেন্ট হলো মেসেজ এবং দ্বিতীয় আর্গুমেন্ট হলো ঐচ্ছিক শিরোনাম (Title)।
কাস্টমাইজেশন:
শুধু মেসেজ:
app.dialog.alert('Just a simple alert.');শিরোনামসহ মেসেজ:
app.dialog.alert('This is an important message', 'Important!');
Confirm Dialog
Confirm (কনফার্ম) ডায়ালগ ব্যবহারকারীর কাছ থেকে কোনো কিছু নিশ্চিত করতে ব্যবহৃত হয়। এতে সাধারণত দুটি বোতাম থাকে: একটিতে সম্মতি (Ok, Yes) এবং অন্যটিতে অস্বীকার (Cancel, No)।
উদাহরণ:
app.dialog.confirm('Are you sure you want to proceed?', 'Confirmation', function () {
console.log('User clicked OK');
}, function () {
console.log('User clicked Cancel');
});
- প্রথম আর্গুমেন্ট: মেসেজ (string)।
- দ্বিতীয় আর্গুমেন্ট: শিরোনাম (optional)।
- তৃতীয় আর্গুমেন্ট: OK বাটন প্রেস করলে কলব্যাক ফাংশন ট্রিগার হবে।
- চতুর্থ আর্গুমেন্ট: Cancel বাটন প্রেস করলে কলব্যাক ফাংশন ট্রিগার হবে।
কাস্টমাইজেশন:
কাস্টম বোতাম টেক্সট:
app.dialog.confirm('Delete this item?', 'Delete', function () { console.log('Deleted'); }, function () { console.log('Not Deleted'); });এখানে ডিফল্ট OK/Cancel টেক্সট ব্যবহার হয়। তবে আপনি
app.dialog.create()ব্যবহার করে কাস্টম বোতাম টেক্সট সেট করতে পারেন।
Prompt Dialog
Prompt (প্রম্প্ট) ডায়ালগ ব্যবহার করে ব্যবহারকারীর কাছ থেকে ইনপুট নেওয়া যায়। এটি সাধারণত একটি ইনপুট ফিল্ড এবং দুটি বোতাম (OK এবং Cancel) থাকে।
উদাহরণ:
app.dialog.prompt('What is your name?', 'Name Input', function (value) {
console.log('User typed: ' + value);
}, function () {
console.log('User cancelled');
});
উপরের উদাহরণে, ব্যবহারকারী OK প্রেস করলে ইনপুটের মান কলব্যাকে value প্যারামিটারে পাওয়া যাবে।
কাস্টম ডায়ালগ তৈরি
Framework7 এর app.dialog.create() API ব্যবহার করে আপনি নিজস্ব কাস্টম ডায়ালগ তৈরি করতে পারেন, যেখানে আপনার পছন্দমতো HTML, বোতাম, এবং ইভেন্ট হ্যান্ডলার যোগ করা যাবে।
উদাহরণ:
var myDialog = app.dialog.create({
title: 'Custom Dialog',
text: 'This is a custom dialog content',
buttons: [
{
text: 'Cancel',
onClick: function () {
console.log('Cancelled');
}
},
{
text: 'Ok',
bold: true,
onClick: function () {
console.log('Confirmed');
}
},
]
});
// ডায়ালগটি প্রদর্শন করতে:
myDialog.open();
সারাংশ
Framework7 এ Dialog Boxes ব্যবহার করে সহজেই Alert, Confirm, এবং Prompt ম্যাসেজ প্রদর্শন করা যায়। এগুলো ব্যবহার করে অ্যাপ্লিকেশনের ইউজার ইন্টারফেস আরও ইন্টারঅ্যাকটিভ ও ইউজার-ফ্রেন্ডলি করা যায়। Alert এবং Confirm ডায়ালগের মাধ্যমে ইউজারকে বার্তা প্রদর্শন, ইনপুট গ্রহণ এবং নিশ্চিতকরণ নেওয়া সম্ভব, যা আপনার অ্যাপকে আরও কার্যকর করে তুলবে।
Read more
